<template>
  <div class="wrapper">
    <parallax class="section page-header header-filter" :style="headerStyle">
      <HeadLine style="z-index: 1;margin: 0;">
        <template slot="top">
          <div style="font-family: 'MyriadPro-Bold_0';"></div>
        </template>
        <template slot="centre">招纳贤士</template>
      </HeadLine>
    </parallax>
    <div class="main main-raised">
      <div class="section profile-content">
        <div class="container">
          <MainTitle>
            <template slot="mainTitle">
              <span style="letter-spacing: 0;font-size: 2.4rem;">
                看看有没有合适你的职位
              </span>
            </template>
            <template slot="mainInfo" style="width: 100%;">
              <div style="color: #005aaa;font-weight: 400;">
                最新招聘信息
              </div>
            </template>
          </MainTitle>
          <DropDownList></DropDownList>
          <div style="margin: 1rem 0;">
            <MainTitle>
              <template slot="mainTitle">
                <span style="letter-spacing: 0;font-size: 2.4rem;">
                  Are you interested in ?
                  <br />
                  您感兴趣吗?
                </span>
              </template>
              <template slot="mainInfo" style="border: 0;">
                有关我们服务的更多信息，请联系 44547 8772541XXXXX经理
              </template>
            </MainTitle>
          </div>
        </div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
import HeadLine from "./components/HeadLine.vue";
import MainTitle from "./components/MainTitle";
import DropDownList from "./components/DropDownList";
export default {
  components: {
    HeadLine,
    MainTitle,
    DropDownList
  },
  bodyClass: "profile-page",
  data() {
    return {
      tabPane1: [
        { image: require("@/assets/img/examples/studio-1.jpg") },
        { image: require("@/assets/img/examples/studio-2.jpg") },
        { image: require("@/assets/img/examples/studio-4.jpg") },
        { image: require("@/assets/img/examples/studio-5.jpg") }
      ],
      tabPane2: [
        { image: require("@/assets/img/examples/olu-eletu.jpg") },
        { image: require("@/assets/img/examples/clem-onojeghuo.jpg") },
        { image: require("@/assets/img/examples/cynthia-del-rio.jpg") },
        { image: require("@/assets/img/examples/mariya-georgieva.jpg") },
        { image: require("@/assets/img/examples/clem-onojegaw.jpg") }
      ],
      tabPane3: [
        { image: require("@/assets/img/examples/mariya-georgieva.jpg") },
        { image: require("@/assets/img/examples/studio-3.jpg") },
        { image: require("@/assets/img/examples/clem-onojeghuo.jpg") },
        { image: require("@/assets/img/examples/olu-eletu.jpg") },
        { image: require("@/assets/img/examples/studio-1.jpg") }
      ]
    };
  },
  props: {
    header: {
      type: String,
      default: require("@/assets/img/zxns.jpg")
    },
    img: {
      type: String,
      default: require("@/assets/img/faces/christian.jpg")
    }
  },
  computed: {
    headerStyle() {
      return {
        backgroundImage: `url(${this.header})`
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  text-align: center;
  width: 100%;
}
.label-h3 {
  display: inline-block;
  font-weight: 500;
}
.text-span {
  font-size: 1.5rem;
}
.section {
  padding: 0;
}

.profile-tabs::v-deep {
  .md-card-tabs .md-list {
    justify-content: center;
  }

  [class*="tab-pane-"] {
    margin-top: 3.213rem;
    padding-bottom: 50px;

    img {
      margin-bottom: 2.142rem;
    }
  }
}
</style>
